<template>
  <div id="app">
    <!-- 使用router-link来导航渲染路由 -->
    <!-- <router-link to='/Login'>登陆</router-link>
    <router-link to='/Register'>注册</router-link> -->
    <van-nav-bar title="标题" left-text="返回" right-text="按钮" left-arrow @click-left="onClickLeft" @click-right="onClickRight" fixed />

    <van-tabbar v-model="active">
      <van-tabbar-item icon="chat" to='/Chat'>标签</van-tabbar-item>
      <van-tabbar-item icon="contact" dot to='/Contact'>标签</van-tabbar-item>
      <van-tabbar-item icon="home" info="5" to='/Records'>标签</van-tabbar-item>
      <van-tabbar-item icon="points-mall" info="20" to='/Gold'>标签</van-tabbar-item>
    </van-tabbar>

    <transition enter-active-class="fadeInRight" leave-active-class="fadeOutLeft">
      <router-view class="animated"></router-view>
    </transition>
  </div>

</template>

<script>
// export default {
//   data: () => ({
//     msg: "这是父组件的数据"
//   })
// };
// var vm = new Vue({
//   el:'#app',
//   data:{

//   },
//   methods:{

//   }
// })
export default {
  // es5和es6相互存在的写法
  data: () => ({
    //tab切换默认选中
    active: 0
  }),
  // created(){
  //   //获取本地存储数据并改变选中效果
  //   let index = JSON.parse(sessionStorage.getItem)) || 0;
  // },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      console.log("按钮");
    }
  }
};
</script>

<style  scoped>
#app {
  /* 横向自动宽度 */
  padding-top: 46px;
  padding-bottom: 60px;
  overflow-x: auto;

  /* 隐藏动画的时候出现滚动条 */

  overflow: hidden;
}

.v-leave-to {
  position: absolute;
  /* transform: translateX(100%); */
}
</style>